<script setup lang="ts">
import { getCurrentInstance, ref, reactive, onMounted, nextTick } from 'vue'
import { onBeforeRouteLeave } from 'vue-router'
const { proxy } = getCurrentInstance()

/* ---- */
const userInfo = proxy.$Store.get('userInfo') || {}
const WXConfig = proxy.$Store.get('WXConfig') || {}
const forSys = proxy.$Sys || []

/* --设置微信分享功能-- */
proxy.$WxTool.loadJsdk(WXConfig, (obj) => {
  if (!obj) return
  // ----
  obj.hideMenuItem()
})

/* ---- */
const user = reactive({
  title: ''
})
// ----
let globalData = {}
// ----
const funcUsers = ref([])
// ----
const isMobile = /^(1[3456789]\d{9})$/
const form = reactive({
  id: 0,
  tabName: 'market_customFuncUser'
})

/* ---- */
const uploadoss = ref()
const layer = ref()
const layerLoading = ref()

/* ---- */
const setAppTitle = (title) => {
  document.title = title
  // --利用iframe的onload事件刷新页面--
  const iframe = document.createElement('iframe')
  iframe.style.visibility = 'hidden'
  iframe.style.width = 0
  iframe.style.height = 0
  document.body.appendChild(iframe)
  nextTick(() => { document.body.removeChild(iframe) })
}
// ----
const getFormInfo = () => {
  // -- 获取信息 --
  const newItems = forSys.filter((item) => { return String(item.name) === form.tabName })
  if (Number(newItems.length) === 1) {
    form.id = newItems[0].id
    proxy.$Myfun.getJsonData(newItems[0].value, (resJson) => {
      const RJData = resJson[0] || {}
      globalData = RJData
      // ----
      if (Number(RJData[proxy.$route.query.type].length) > 0) funcUsers.value = RJData[proxy.$route.query.type]
    })
  }
  // ----
  if (proxy.$route.query.name) user.title = proxy.$route.query.name + document.title
  // --设置网页title--
  const forTitle = user.title || document.title
  setAppTitle(forTitle)
}
// ----
const getAuditFun = (type, item, index) => {
  switch (Number(type)) {
    case 1: {
      if (Number(index) >= 0) { item.splice(index, 1) } else {
        item.push({
          name: '',
          telphone: ''
        })
      }
      break
    }
  }
}
// ----
const subform = async () => {
  for (let i = 0; i < funcUsers.value.length; i++) {
    if (!isMobile.test(funcUsers.value[i].telphone)) {
      proxy.$Myfun.forToast(layer.value, 'open', '请填写合法的手机号！')
      return false
    }
    if (!funcUsers.value[i].name || Number(funcUsers.value[i].name.length) === 0) {
      proxy.$Myfun.forToast(layer.value, 'open', '请填写具体名称！')
      return false
    }
  }
  // ----
  globalData[proxy.$route.query.type] = funcUsers.value
  // ----
  const forValue = JSON.stringify(globalData)
  // ----
  let forType = 'post'
  let forUrl = 'system/create'
  let forData = {
    name: form.tabName,
    value: forValue,
    // ----
    config_id: userInfo.config_id,
    openid: userInfo.openid
  }
  if (Number(form.id) > 0) {
    forType = 'patch'
    forUrl = 'system/update?id=' + form.id
    forData = {
      value: forValue,
      // ----
      config_id: userInfo.config_id,
      openid: userInfo.openid
    }
  }
  // ----
  proxy.$Myfun.onLoading(layerLoading.value, 'open', proxy.$Global.loadingMsg)
  let resData = ''
  await proxy.$http[forType](forUrl, forData).then((res) => { resData = res }).catch((err) => { proxy.$Myfun.forToast(layer.value, 'open', err) })
  // ----
  proxy.$Myfun.disLoading(layerLoading.value, 'close')
  if (resData) proxy.$router.back()
}
const goback = () => { proxy.$router.back() }

/* ---- */
onMounted(() => {
  getFormInfo()
})
onBeforeRouteLeave(() => { proxy.$Myfun.setScrollTop(proxy.$refs.formSection) })
</script>

<template>
  <div class="mescroll-touch" ref="formSection">
    <div class="formSet">
      <ul>
        <li>
          <div class="form-alone">
            <div class="xw-flex xw-flex-align xw-flex-justify">
              <h1>用户列表</h1>
              <span class="FAE-btn fa fa-plus-square xw-color-12 xw-act" @click="getAuditFun(1, funcUsers)"></span>
            </div>
            <div class="FAE-item xw-flex xw-flex-align xw-radius-3" v-for="(item, index) in funcUsers">
              <em class="xw-color-13">手机</em>
              <p class="xw-radius-3 xw-flex-W3"><input class="text" type="text" v-model.trim="item.telphone"/></p>
              <em class="FAE-fg xw-color-13">名称</em>
              <p class="xw-radius-3 xw-flex-W2"><input class="text" type="text" v-model.trim="item.name"/></p>
              <span class="FAE-btn fa fa-minus-square xw-color-13 xw-act" @click="getAuditFun(1, funcUsers, index)"></span>
            </div>
          </div>
        </li>
      </ul>
      <div class="form-sub xw-radius-3 xw-bgCL-11 xw-act" @click="subform">确定提交</div>
      <div class="form-sub xw-radius-3 xw-WhiteRed xw-act" @click="goback">取消返回</div>
    </div>
    <uploadoss-view ref="uploadoss"/>
    <layer-view ref="layer"/>
    <layer-view ref="layerLoading"/>
  </div>
</template>
